<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>drawFont</title>
</head>
<style>
  canvas {
    display: block;
    border: 1px solid green;
    margin: 30px auto;
  }
</style>
<body>
  <canvas id="canvas" width="600" height="400"></canvas>
</body>

<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d');
  const dpr = window.devicePixelRatio || 1

  /** 
   * 获取适应dpr的canvas画布
  */
  function getCanvasWithDpr(dpr, canvas, ctx) {
    const oldWidth = canvas.width
    const oldHeight = canvas.height

    canvas.width = oldWidth * dpr
    canvas.height = oldHeight * dpr

    canvas.style.width = oldWidth + 'px'
    canvas.style.height = oldHeight + 'px'

    ctx.scale(dpr, dpr)
  }

  getCanvasWithDpr(dpr, canvas, ctx)

  // 绘制字体
  ctx.beginPath()

  // 实心字体
  ctx.fillStyle = 'orange'
  ctx.font = 'bold 60px 微软雅黑'
  ctx.strokeStyle = 'pink'
  /**
   * text，x坐标，y坐标，最大宽度
  */
  ctx.fillText('王鹏博', 100, 100, 300)
  ctx.strokeText('蓬勃', 300, 300)

  ctx.textAlign = 'left' // 水平对齐 left right center start end
  ctx.textBaseLine = 'middle' // 基线位置 top bottom middle
  ctx.fillText('嘻嘻', 200, 300) 
  ctx.closePath()
</script>
</html>